/**
 * 尊敬的用户，你好：页面 JS 面板是高阶用法，一般不建议普通用户使用，如需使用，请确定你具备研发背景，能够自我排查问题。
 * 我们可以用 JS 面板来开发一些定制度高功能，比如：调用API接口，自定义动作执行等等。
 */

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
    ("「页面 JS」：当前页面地址 " + location.href);

    const self = this;
    // 公共图标路径
    const ICON_BASE = api.CONST["bd_var:44dc1510-489f-4189-bdd6-8266ca27c2d5"];
    getLawStat().then(res => {
        // 卡片数据 + 容器ID对应
        let noUseMatter = parseInt(res[6].lawCount) - parseInt(res[7].lawCount);
        let denominator = parseInt(res[6].lawCount) || 0;
        let numerator = parseInt(res[7].lawCount) || 0;

        let useRate = denominator === 0 ? 0 : (numerator / denominator * 100).toFixed(2) + "%";

        const cards = [
            {id: "text_cf55mw", value: res[0].lawCount, label: "法规总数", bgColor: "#33BBFF", icon: "5rOV6KeE5oC75pWw.svg"},
            {id: "text_bk8hxo", value: res[1].lawCount, label: "法律", bgColor: "#5260DC", icon: "5rOV5b6L5Zu+5qCHMQ.png"},
            {id: "text_f4645m", value: res[2].lawCount, label: "行政法规", bgColor: "#FF4433", icon: "6KGM5pS5rOV6KeE5Zu+5qCHMQ.svg"},
            {id: "text_5tgwqb", value: res[6].lawCount, label: "案由总数", bgColor: "#33BBFF", icon: "5rOV6KeE5oC75pWw.svg"},
            {id: "text_dcnbr2", value: res[7].lawCount, label: "行使案由", bgColor: "#5260DC", icon: "5rOV5b6L5Zu+5qCHMQ.png"},
            {id: "text_h86nq9", value: res[4].lawCount, label: "部门规章", bgColor: "#FF9623", icon: "6YOo6Zeo6KeE56ug.png"},
            {id: "text_7hs0h2", value: res[3].lawCount, label: "地方性法规", bgColor: "#35D4A7", icon: "5Zyw5pa55oCn5rOV6KeE.svg"},
            {id: "text_b8nx4d", value: res[5].lawCount, label: "政府规章", bgColor: "#33BBFF", icon: "5rOV6KeE5oC75pWw.svg"},
            {id: "text_8yhqry", value: noUseMatter, label: "未行使案由", bgColor: "#FF9623", icon: "6YOo6Zeo6KeE56ug.png"},
            {id: "text_ac1vy2", value: useRate + ' %', label: "案由行使率", bgColor: "#35D4A7", icon: "5Zyw5pa55oCn5rOV6KeE.svg"}
        ];
        initTextValue(self, cards, ICON_BASE)
    })
}

function initTextValue(self, cards, ICON_BASE) {
    // 循环赋值
    cards.forEach(card => {
        const html = `
    <div style="background-color: #f8f8f8; border-radius: 0.04rem; padding: 0.10rem; display: flex; align-items: center;">
      <div style="width: 0.36rem; height: 0.36rem; border-radius: 50%; background-color: ${card.bgColor}; display: flex; align-items: center; justify-content: center; margin-right: 0.10rem;">
        <img src="${ICON_BASE + card.icon}" alt="图标" style="width: 0.24rem; height: 0.24rem;">
      </div>
      <div>
        <div style="font-size: 0.20rem; font-weight: bold; color: #223355;">${card.value}</div>
        <div style="font-size: 0.14rem; color: #6B7A99;">${card.label}</div>
      </div>
    </div>
  `;
        self.$$(card.id).$$setValue(html);
    });
}


function getLawStat() {
    return new Promise((resolve, reject) => {
        const dataModeId = "a64885c4-97a9-4037-a55f-b6905caf0baa";
        api.DATA_SOURCE_EXECUTE(dataModeId, 'ddcat', [], [], '')
            .then(res => {
                resolve(res.result);
            }).catch(() => {
            reject();
        })
    })
}
